<template>
  <el-container>
    <el-header>
      <el-button type="primary" @click="showModal">{{ $t('system.menu.addParent') }}</el-button>
      <el-divider direction="vertical" />
      <el-button :disabled="isDisabled" type="success" @click="addChild">{{ $t('system.menu.addChild') }}</el-button>
      <el-button :disabled="isDisabled" type="warning" @click="changeTree">{{ $t('system.menu.edit') }}</el-button>
      <el-button :disabled="isDisabled" type="danger" @click="changeDelete(true)">{{ $t('system.menu.delete') }}</el-button>
    </el-header>
    <el-main>
      <el-tree
        v-loading="loading"
        :data="allTree"
        :expand-on-click-node="false"
        :default-expand-all="true"
        :highlight-current="true"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
      <delete-dialog ref="delete-dialog" :delete-state="deleteState" :loading="deleteLoading" @change-delete="changeDelete" @delete-this="deleteThis" />
      <menu-setting ref="menu-setting" :title="title" :show-dialog="editDialog" :choose-item="chooseItem" @change-dialog="changeDialog" @edit-success="editSuccess" />
    </el-main>
  </el-container>

</template>

<script>
import { getAllTreeInfo, deleteTreeItem } from '@/api/system'
import menuSetting from '@/components/system/menuSetting.vue'
import deleteDialog from '@/components/delete/index.vue'
export default {
  name: 'Menu',
  components: {
    menuSetting,
    deleteDialog
  },
  data() {
    return {
      title: null,
      loading: true,
      isDisabled: true,
      editDialog: false,
      deleteState: false,
      deleteLoading: false,
      allTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      chooseItem: {
        iconPath: null,
        id: null,
        isButton: null,
        parentId: null,
        label: null,
        label2: null,
        url: null
      }
    }
  },
  mounted() {
    this.getAllTree()
  },
  methods: {
    handleNodeClick(data) {
      if (data) {
        this.choose(data)
        this.isDisabled = !(data.id != null || data.parentId != null)
      } else {
        this.choose({})
        this.isDisabled = true
      }
    },
    getAllTree() {
      getAllTreeInfo()
        .then(res => {
          if (res.success) {
            this.allTree = this.getTreeNode(res.data)
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    // 编辑
    changeTree() {
      this.editDialog = true
    },
    // 添加
    showModal() {
      this.title = this.$t('system.menu.addParent')
      this.choose({})
      this.chooseItem.iconPath = 'anticon anticon-bars'
      this.editDialog = true
    },
    // 添加子菜单
    addChild() {
      const thisId = this.chooseItem.id
      this.choose({
        'parentId': thisId
      })
      this.editDialog = true
    },
    // 根据对象渲染Tree
    getTreeNode(tree) {
      const arr = []
      if (!!tree && tree.length !== 0) {
        tree.forEach(item => {
          const obj = {}
          obj.label = item['menuDescriptions'][0].description
          if (item['menuDescriptions'][1]) {
            obj.label2 = item['menuDescriptions'][1].description
          }
          obj.id = item.id
          obj.parentId = item.parentId
          obj.url = item.url
          obj.iconPath = item.iconPath
          obj.isButton = item.isButton
          obj.expand = true
          obj.checked = false
          obj.children = this.getTreeNode(item.children)
          arr.push(obj)
        })
      }
      this.loading = false
      return arr
    },
    choose(param) {
      this.chooseItem.iconPath = param.iconPath || '' // anticon anticon-bars
      this.chooseItem.id = param.id || ''
      this.chooseItem.parentId = param.parentId || ''
      this.chooseItem.label = param.label || ''
      this.chooseItem.label2 = param.label2 || ''
      this.chooseItem.isButton = param.isButton || 0
      this.chooseItem.url = param.url || ''
    },
    changeDialog(param) {
      this.editDialog = param
      setTimeout(() => {
        this.choose({})
      }, 10)
    },
    changeDelete(param) {
      this.deleteState = param
    },
    editSuccess() {
      this.handleNodeClick(null)
      this.getAllTree()
    },
    deleteThis() {
      this.deleteLoading = true
      const id = this.chooseItem.id
      deleteTreeItem(id)
        .then(res => {
          this.deleteLoading = false
          if (res.success) {
            this.$message.success(this.$t('common.tip.deleteSuccess'))
            this.changeDelete(false)
            this.handleNodeClick({})
            this.getAllTree()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.deleteLoading = false
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container{
  height: calc(100vh - 85px);
}
.el-header {
  line-height: 60px;
}
.el-main{
  padding: 0 20px;
}
</style>
